{% extends "base.html" %}

{% block title %}修改密码 - Ruiyun Cloud{% endblock %}

{% block content %}
<div class="change-password-page">
    <div class="page-header">
        <h1>🔒 修改密码</h1>
        <p>修改管理员账户密码</p>
    </div>

    <form method="POST" action="{{ url_for('admin.change_password') }}" class="change-password-form">
        <!-- Current Password -->
        <div class="form-group">
            <label for="current_password">当前密码 <span class="required">*</span></label>
            <input
                type="password"
                id="current_password"
                name="current_password"
                class="form-control"
                placeholder="请输入当前密码"
                required
                autocomplete="current-password"
            >
        </div>

        <!-- New Password -->
        <div class="form-group">
            <label for="new_password">新密码 <span class="required">*</span></label>
            <input
                type="password"
                id="new_password"
                name="new_password"
                class="form-control"
                placeholder="请输入新密码"
                minlength="8"
                required
                autocomplete="new-password"
            >
            <small class="form-text">密码至少需要8个字符</small>
        </div>

        <!-- Confirm Password -->
        <div class="form-group">
            <label for="confirm_password">确认新密码 <span class="required">*</span></label>
            <input
                type="password"
                id="confirm_password"
                name="confirm_password"
                class="form-control"
                placeholder="请再次输入新密码"
                minlength="8"
                required
                autocomplete="new-password"
            >
        </div>

        <!-- Form Actions -->
        <div class="form-actions">
            <button type="submit" class="btn btn-primary btn-lg">
                ✓ 修改密码
            </button>
            <a href="{{ url_for('admin.dashboard') }}" class="btn btn-secondary btn-lg">
                ✕ 取消
            </a>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_css %}
<style>
    .change-password-page {
        max-width: 600px;
        margin: 0 auto;
    }

    .change-password-form {
        background: white;
        padding: 2rem;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-group label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 600;
        color: #333;
    }

    .required {
        color: #f5576c;
    }

    .form-control {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: 1rem;
        transition: border-color 0.3s, box-shadow 0.3s;
    }

    .form-control:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .form-text {
        display: block;
        margin-top: 0.25rem;
        font-size: 0.875rem;
        color: #666;
    }

    .form-actions {
        display: flex;
        gap: 1rem;
        justify-content: flex-end;
        margin-top: 2rem;
        padding-top: 1.5rem;
        border-top: 1px solid #e9ecef;
    }

    .btn-lg {
        padding: 0.875rem 2rem;
        font-size: 1.1rem;
    }
</style>
{% endblock %}

{% block extra_js %}
<script>
    // Client-side password validation
    document.querySelector('.change-password-form').addEventListener('submit', function(e) {
        const newPassword = document.getElementById('new_password').value;
        const confirmPassword = document.getElementById('confirm_password').value;

        if (newPassword !== confirmPassword) {
            alert('两次输入的新密码不一致');
            e.preventDefault();
            return;
        }

        if (newPassword.length < 8) {
            alert('新密码至少需要8个字符');
            e.preventDefault();
            return;
        }
    });

    // Show password toggle (optional enhancement)
    const passwordInputs = document.querySelectorAll('input[type="password"]');
    passwordInputs.forEach(input => {
        input.addEventListener('focus', function() {
            this.style.borderColor = '#667eea';
        });
        input.addEventListener('blur', function() {
            this.style.borderColor = '#ddd';
        });
    });
</script>
{% endblock %}
